<!DOCTYPE html>
<html lang="ZH-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>投票（闭包）</title>
    <style>
        .wrapper {
            width: 1200px;
            margin: 0 auto;
        }
        .wrapper  > div {
            width: 200px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            border: 1px solid #000;
            float: left;
            margin-left: 50px;
            cursor: pointer;
        }
        h3 {
            text-align: center;
        }

        body {
            /* 禁止选中文本 */
            user-select: none;
        }
    </style>
</head>
<body>
    <h3>上半年-技术小组投票</h3>
    <div class="wrapper">
        <div class="item first">第一组 <span>（ 0 ）</span></div>
        <div class="item second">第二组 <span>（ 0 ）</span></div>
        <div class="item third">第三组 <span>（ 0 ）</span></div>
        <div class="item fourth">第四组 <span>（ 0 ）</span></div>
    </div>

    <script>
        // 需求：
            // 1、点击小组进行投票
            // 2、每个小组票数是独立的，随着点击次数增加票数(+1)


        // 思考：
            // 需要控制哪些元素
            // 控制元素的什么内容（文本）

        // 闭包：
             // 步骤：1、2、3、


        // 编码：
            // 1、获取元素
            var divItems = document.querySelectorAll(".item");
            // 2、循环标签数组 绑定事件
            for(var i = 0 ; i < divItems.length ; i ++){
                // 立即执行函数 （产生闭包）
                ;(function(index) {// 作用域 1
                    // 变量记录票数
                    var count = 0;
                    // 索引值
                    var index = index;
                    //事件绑定
                    divItems[i].onclick = function(){// 作用域 2
                        // console.log(i);// 4
                        // console.log("index:",index);
                        // 设置当前点击的标签的票数
                        var span = divItems[index].children[0];
                        // 自增
                        count ++;
                        // console.log(span);
                        span.innerText = "（ "+count+" ）";
                    }
                })(i)
            }

            // console.log(i);// 4
            // console.log(index);// 报错， index is not defined

        
  
    </script>
</body>
</html>